<template>
    <div class="playback-container custom-border">
      <header class="header custom-border">
        <el-form inline  >
          <el-form-item label="时间">
            <el-date-picker
              v-model="videoTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="refresh"
              value-format="yyyy-MM-dd HH:mm:ss"
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="视频">
            <el-select v-model="selectedVideo"  @change="selectedVideoChanged" >
              <el-option 
                v-for="item of videos" 
                :key="item.event_video_uuid"  
                :label="item.create_date"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
            <el-button circle icon="el-icon-close" class="btn-close" @click="close" plain type="primary"></el-button>
        </el-form>
      </header>


      <section class="container">
        <!-- <el-scrollbar> 
          <el-menu  @select="selectedVideoChanged"   text-color="#808080">
              <el-menu-item 
                v-for="(item, i) of videos" 
                :key="item.event_video_uuid"  
                :index="i+ ''" 
              >
                  <span slot="title">{{item.create_date}}</span>
              </el-menu-item>
          </el-menu>
        </el-scrollbar> -->
        <video-player 
          ref="videoContainer"
          class="video-player vjs-custom-skin"
          :options="options"
          :playsinline="true"
        ></video-player>
      </section>
  </div>
</template>

<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
// import "videojs-flash";
// import swf from 'videojs-swf/dist/video-js.swf'
import { playback } from "./api";
import {config} from "../../../../../config/env-configs"


export default {
  name: "Playback",
  components: {
    videoPlayer
  },
  props:{
    data: Object
  },
  data: function(){
    // let swf = require('./video-js.swf');
    return {
      options: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // techOrder: ["html5", "flash"], //设置顺序
        techOrder: ["html5"], //设置顺序
        // flash: {
        //   hls: { withCredentials: false },
        //   swf: process.env.NODE_ENV === 'development'? (swf.default? swf.default: swf) : 'static/video-js.swf'
        // },
        html5: { hls: { withCredentials: false } },
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        },

      },
      videoTime: [],
      videos: [],
      selectedVideo: {}
    }
  },
  mounted:function(){
    this.videoTime = [this.dayjs().add(-10, 'days').format('YYYY-MM-DD HH:mm:ss'), this.dayjs().format('YYYY-MM-DD HH:mm:ss')]
    this.refresh(this.videoTime);
  },
   methods:{
      async refresh(time){
        if(time === null) time = [];
        let {data} = await playback({
          "live_uuid": this.data.uu_id,
          "start_date": time[0], 
          "end_date": time[1],
          // "project_id": this.data.project_id
        })
        if(data.errno === 0){
          this.videos = data.videos;
          this.selectedVideo = this.videos[0];
          this.selectedVideoChanged();
        }else{
          this.$message({
            type: 'error',
            message: data.message
          })
        }
      },
      selectedVideoChanged(){
        if(!this.selectedVideo ) return;
        let src =  config.video.baseURL + '/video'+ this.selectedVideo.path;
        this.$set(this.options, 'sources', [ {//播放示例
          // type: 'video/x-flv',
          type: 'video/mp4',
          src
        }])
      },
      close(e){
        this.$parent.playbackVisible = false;
        this.$emit('close', e)
      },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  scoped>
.playback-container {
  background: linear-gradient(to bottom right, #041616, #2f5560);
  display: flex;
  flex-direction: column;
  width: calc(100% - 18px);
  // height: calc(100vh - 80px);
  box-sizing: border-box;
  position: absolute;
  left:8px;
  top: 0;
  z-index: 10;
  // overflow: hidden;

  .header{
    display: flex;
    align-items: center;
    min-height: 60px;
    .el-form{
      width: 100%;
      height: 33px;
      padding: 0 15px;
      .btn-close{
        float: right;
      }
    }
  }
  .container{
    display: inherit;
    background: #000;
    .video-player{
      width: 100%;
      height: 100%;
    }
    .video-player ::v-deep .video-js .vjs-big-play-button{
      top: calc(50% - 0.9rem);
      left: calc(50% - 3rem);
    }

  }
  .el-scrollbar{
    width: 210px;
    height: calc(100vh - 118px);
    overflow:hidden;
    background: #000a10;
    .el-menu{
      width: 100%;
      overflow: hidden;
    }
    .el-menu-item{
       background: #000a10 ;
    }
  }

}

</style>
